<template>
  <div>
    <el-card
      class="box-card"
      v-for="(item, index) in userbookInfo"
      :key="index"
    >
      <div slot="header" class="clearfix">
        <span class="title">预约信息</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="deleteHandler(item.id)"
          >取消预约</el-button
        >
      </div>
      <div class="text item">
        预约时间：{{ item.oderdate + "-" + item.odertime }}
      </div>
      <div class="text item">预约姓名：{{ username }}</div>
      <div class="text item" style="color: #e6a23c">
        预约地点：{{ item.oderfloor + "-" + item.oderqu + "-" + item.oderseat }}
      </div>
    </el-card>
    <el-button type="primary" @click="toIndex">回到首页</el-button>
  </div>
</template>
<style>
.text {
  font-size: 18px;
}

.item {
  margin-bottom: 0.2rem;
  text-align: left;
}
.clearfix .title {
  font-size: 25px;
  font-weight: 800;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 10rem;
  margin: 1rem auto;
}
</style>
<script>
import { del, get } from "@/utils/request";
import axios from "axios";
export default {
  data() {
    return {
      bookInfo: {},
      userbookInfo: [],
      userId: "",
      username: "",
      bookStatus: "",
      dialogVisible: false,
    };
  },
  methods: {
    toIndex() {
      this.$router.replace("/");
    },
    async getBookInfo() {
      let url = "http://120.77.41.127:8080/bookInfo/query";
      let data = await get(url);
      this.bookInfo = data.data;
      console.log(this.bookInfo);
      this.userId = sessionStorage.getItem("userId");
      this.username = sessionStorage.getItem("userName");
      for (let i = 0; i < this.bookInfo.length; i++) {
        if (this.bookInfo[i].odermyname == this.username) {
          this.userbookInfo.push(this.bookInfo[i]);
          console.log(this.userbookInfo);
        }
      }
      if (this.userbookInfo.length == 0) {
        this.userbookInfo = [
          {
            oderdate: "",
            odertime: "",
            oderfloor: "",
            oderqu: "",
            oderseat: "",
          },
        ];
        console.log("zhixing");
      }
      if (this.userbookInfo.bookStatus == "1") {
        this.bookStatus = "预约成功";
        console.log("success");
      }
    },
    deleteHandler(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://120.77.41.127:8080/bookInfo/deleteById";
        del(url, { id: id }).then((resp) => {
          // 1. 提示
          this.$message({ type: "success", message: resp.message });
          // 2. 刷新
          this.$router.go(0);
        });
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted: function () {
    this.getBookInfo();
  },
};
</script>